<template>
    <div class="login-container">
        <h2 v-if="activeTab === 'login'">登录</h2>
        <h2 v-if="activeTab === 'register'">注册</h2>
        <h2 v-if="activeTab === 'forgot'">忘记密码</h2>

        <el-tabs v-model="activeTab">
            <el-tab-pane label="登录" name="login">
                <el-form :model="loginForm" @submit.native.prevent="handleLogin">
                    <el-form-item>
                        <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleLogin">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="注册" name="register">
                <el-form :model="registerForm" @submit.native.prevent="handleRegister">
                    <el-form-item>
                        <el-input v-model="registerForm.username" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="registerForm.password" type="password" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleRegister">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="忘记密码" name="forgot">
                <el-form :model="forgotForm" @submit.native.prevent="handleForgot">
                    <el-form-item>
                        <el-input v-model="forgotForm.email" placeholder="邮箱"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleForgot">发送验证码</el-button>
                    </el-form-item>
                    <el-form-item v-if="forgotForm.codeSent">
                        <el-input v-model="forgotForm.code" placeholder="验证码"></el-input>
                    </el-form-item>
                    <el-form-item v-if="forgotForm.codeSent">
                        <el-input v-model="forgotForm.newPassword" type="password" placeholder="新密码"></el-input>
                    </el-form-item>
                    <el-form-item v-if="forgotForm.codeSent">
                        <el-button type="primary" @click="handleResetPassword">重置密码</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { login, register } from '@/api/user'
import router from '@/router'

const activeTab = ref('login')

const loginForm = reactive({
    username: '',
    password: ''
})

const registerForm = reactive({
    email: '',
    username: '',
    password: ''
})

const forgotForm = reactive({
    email: '',
    code: '',
    newPassword: '',
    codeSent: false
})

const handleLogin = async () => {
    console.log('登录信息:', loginForm)
    // 在这里处理登录逻辑
    const [error, { data, msg }] = await login(loginForm)
    if (data) {
        ElMessage.success(msg)
        localStorage.setItem('token', data)
        router.push('/')
    }
}

const handleRegister = async () => {
    console.log('注册信息:', registerForm)
    const [error, { data, msg }] = await register(registerForm)
    if (data) {
        ElMessage.success(msg)
    }
}

const handleForgot = () => {
    console.log('发送验证码到:', forgotForm.email)
    forgotForm.codeSent = true
    // 在这里处理发送验证码逻辑
}

const handleResetPassword = () => {
    console.log('重置密码信息:', forgotForm)
    // 在这里处理重置密码逻辑
}
</script>

<style scoped>
.login-container {
    max-width: 400px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>